<template>
  <div>

    <div class="index-wrap">
      <div class="index-left">
        <div class="index-left-block" style="background-color: #ffffff">
          <div class="artwork-category-panel__category-title">
            作品类别
          </div>

          <span class="allSpan">
                        <a @click="selectAllWorks()" style="cursor: pointer;color:#222222;text-decoration: none">
                        全部</a></span>
          <span class="categoryName" v-for="category in categories">
                        <el-divider direction="vertical"></el-divider>
                    <a @click="selectWorkCategories(category)"
                       style="cursor: pointer;color:#222222;text-decoration: none">{{ category.categoryName }}</a>
                </span>
          <el-divider></el-divider>
          <div v-for="category in categories">
            <div class="workTitle">
              {{ category.categoryName }}
              <br/><br/>
            </div>
            <span v-for="category2 in category.categories">
                        <el-tag @click="selectWorkCategories(category2)"
                                class="workItem">{{ category2.categoryName }}</el-tag>
                    </span>
            <el-divider></el-divider>
          </div>

        </div>
      </div>
    </div>

    <div>
      <el-row v-if="newWorksInfo.length !== 0" class="swiper-painter-item">
        <el-card class="swiper-painter-cards" v-for="workInfo in newWorksInfo">
          <button class="work-button" style="border: #ffffff" @click="workDetail(workInfo)">
            <div v-if="workInfo.workFileType === 1">
              <img class="image" :src="imgUrl+workInfo.workFilename"/>
            </div>
            <div v-else @click="workDetail(workInfo)">
              <video :poster="workInfo.poster" :controls="true" class="video_fo"
                     :src="imgUrl+workInfo.workFilename"></video>
            </div>
            <div class="work-div">
                            <span class="painter-item-name">
                                {{ workInfo.workName }}
                            </span>
            </div>
            <div class="introduction-motto">
              <span class="author-span">
                  <img class="work-user-img" :src="imgUrl+workInfo.userImg">
                  <span class="author-span">
                      {{ workInfo.username }}
                  </span>

              </span>
              <span class="star-span">
                <i class="icon-favorites"></i>
                {{ workInfo.workLikesNums }}
              </span>
            </div>
          </button>

        </el-card>

      </el-row>
    </div>


  </div>
</template>

<script setup>
import {
  addWorkComment,
  searchWorksInfoByCategory
} from "@/assets/api/workInfoApi";
import {selectCategories} from "@/assets/api/categoryApi";
import {getCurrentInstance, onBeforeMount, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
const router = useRouter();
const route = useRoute();
const newWorksInfo = ref([{}]);
const centerDialogVisible = ref(false);
const workImg = ref('');
const workInfo = ref({});
const comments = ref([{user: {userImg: ''}}]);
const comment = ref('');
const scrolls = ref(true);
const categories = ref([]);

const selectAllWorks = () => {
  router.push('/newWork');
};
const selectNewWorksInfo = () => {
  let type = 'work_date';
  let data = {};
  data.categoryId = route.query.id;
  searchWorksInfoByCategory(type, data).then((res) => {
    if (res.code === 200) {
      newWorksInfo.value = res.data;
    }

  })
};
const workDetail = (work) => {
  router.push({path: '/workDetail', query: {id: work.workId}});
};
const addComment = (work) => {
  let data = {};
  data.userId = localStorage.getItem("userId");
  data.workId = work.workId.value;
  data.content = comment.value;
  comment.value = '';
  addWorkComment(data).then((res) => {
    if (res.code === 200) {
      ElMessage.success(res.message)
    }

  })
};
const selectWorkCategories = (category) => {
  router.push({path: '/newWorkCategory', query: {type: 'work_date', id: category.categoryId}});
  selectNewWorksInfo('work_date',category.categoryId)
};
const showCategories = () => {
  let data = {};
  selectCategories(data).then((res) => {
    categories.value = res.data;
  })
};

// watch: {
//     $route(to, from) {
//         location.reload();
//     }
// },
onBeforeMount(() => {
  selectNewWorksInfo(route.query.id);
  showCategories();
});
</script>

<style scoped>
    @import "../../assets/fonts/iconfont.css";

    .index-wrap {
        width: 1200px;
        margin: 0 auto;
    }
    .index-left {
        float: left;
        text-align: left;
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
    }
    .index-left-block {
        margin: 15px;
        width: 300px;
        box-shadow: 0 0 1px #ddd;
    }
    .workTitle{
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 10px;
    }

    .artwork-category-panel__category-title {
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
        font-weight: 700;
        margin-top: 10px;
    }

    .workItem{
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }

    .categoryName{
        font-size: 14px;
    }
    .allSpan{
        margin-left: 10px;
    }

    .swiper-painter-item {
        margin-left: 180px;
        overflow: hidden;
        padding: 0 12px;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
    }

    .swiper-painter-cards {
        margin-top: 15px;
        height: 400px;
        margin-left: 10px;
        width: 300px;
    }

    .painter-item-name {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        font-size: 14px;
        color: #333;
    }

    .introduction-motto {
        background-color: #ffffff;
        margin-top: 8px;
        font-size: 14px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        text-justify: inter-ideograph;
    }

    .image {
        width: 100%;
        height: 250px;
        display: block;
        margin: 0 auto
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .star-span {
        color: #adb3fb;
        float: right;
        margin-right: 20px;
        background-color: #ffffff;
        margin-top: 20px;
    }

    .author-span {
        color: #777;
        font-size: 14px;
        max-width: 154px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #ffffff;
    }

    .work-user-img {
        width: 55px;
        height: 55px;
        border-radius: 100%;
    }

    .work-div {
        background-color: #ffffff;
        margin-top: 20px;
    }

    .work-button {
        background-color: #ffffff;
        border: #fff;
        text-align: center;
    }
    a {
        text-decoration: none;
    }
    .video_fo {
        position: relative;
        width: 283px;
        height: 200px;
        left: -20px;
    }
</style>

